<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">类型</label>
            <div class="col-sm-10 typeRadio">
              	<label class="radio-inline">
				<input type="radio" name="typeId" value="1" checked> 菜单 </label>
				<label class="radio-inline">
				<input type="radio" name="typeId" value="2"> 按钮 </label>
            </div>
          </div>
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
            <div class="col-sm-10">
              <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
            </div>
          </div>
          <div class="form-group">
            <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="urlId" placeholder="url">
            </div>
          </div>
          <div class="form-group">
			<label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
			<div class="col-sm-10">
				<input type="text" id="permissionId"
				       placeholder="多个用逗号分隔，如：user:list,user:create"
					   class="form-control">
			</div>
		  </div>
		  <div class="form-group">
				<label for="sortId" class="col-sm-2 control-label">排序号：</label>
				<div class="col-sm-10">
					<input type="text" id="sortId" placeholder="排序号"
						class="form-control">
				</div>
		 </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
      <!-- zTree 对应的div -->
      <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
		<div class="layui-layer-title" style="cursor: move;">选择菜单</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a>
			<a class="layui-layer-btn1 btn-cancel">取消</a>
	     </div>
      </div>
  </div>
  <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
  <script type="text/javascript" src="bower_components/layer/layer.js">
  </script>
  <script type="text/javascript">
  
  var zTree; //zTree是第三方扩展的一个Jquery插件
  //初始化zTree时会用到
  var setting = {
  	data : {
  		simpleData : {
  			enable : true,//表示使用简单数据模式
  			idKey : "id",  //节点数据中保存唯一标识的属性名称
  			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
  			rootPId : null  //根节点id
  		}//json 格式javascript对象
  	}
  }//json 格式的javascript对象
  $(function(){
      $(".load-sys-menu").click(doLoadMenus);
      $(".btn-cancel").click(doCancel);
      $(".btn-confirm").click(doConfirm)
      $(".box-footer").on("click",".btn-save",doSaveOrUpdate);
  })
  //提交表单数据
  function doSaveOrUpdate(){
      //1.获取表单数据
      let type=$("form input:radio:checked").val();
      let name=$("#nameId").val();
      let parentId=$("#parentId").data("parentId");
      let url=$("#urlId").val();
      let permission=$("#permissionId").val();
      let sort=$("#sortId").val();
      //2.校验表单数据
      //3.异步提交表单数据并基于响应结果刷新页面.
      let saveUrl="/menu/doSaveObject";
      let params={
          name:name,
          type:type,
          parentId:parentId,
          url:url,
          permission:permission,
          sort:sort
      }
      console.log(params);
      $.post(saveUrl,params,function(result){
           if(result.state==1){
               alert(result.message);
               $("#mainContentId").load("/menu/menu_list");
           }else{
               alert(result.message);
           }
      })
  }
  //点击ztree中的确定按钮时执行此函数
  function doConfirm(){
      //1.获取菜单树中选中的菜单对象,
      let nodes=zTree.getSelectedNodes();//查官方treejs.cn
      //console.log(nodes);//输出的目的是检测选中的结果是什么?
      //2.获取选中zTree节点的id和name,并将其值填充到表单上.
      //2.1借助jquery中data函数将节点id值存储到某个对象上,其语法为:
      //data(key[,value]),假如只指定key表示取值,两个都指定就存.
      $("#parentId").data("parentId",nodes[0].id);
      //2.2借助jquery中val函数将name值填充到表单中,val函数的具体语法
      //val([value]),当没有value时表示获取值,当value时表示赋值.
      $("#parentId").val(nodes[0].name);
      //3.隐藏zTree对象
      doCancel();
  }
  //点击zTree中的cancel按钮或右上角的close叉号时执行此函数
  function doCancel(){
      $("#menuLayer").css("display","none");
  }
  //点击上级菜单时执行此函数加载菜单数据并以tree结构进行呈现.
  function doLoadMenus(){
     //debugger
     let url="menu/doFindZtreeMenuNodes";
     $.getJSON(url,function(result){
         zTree=$.fn.zTree.init($("#menuTree"),setting,result.data);
         $("#menuLayer").css("display","block");//显示ztree对应的div
     })
  }
 </script>
    
    
    
    
    
    
    
    
    